<template>
  <div class="diy-text-config">
    <a-tabs size="small" class="margin-bottom-xs" v-model:activeKey="activeKey">
      <a-tab-pane v-for="item in list" :key="item.value" :tab="item.label"></a-tab-pane>
    </a-tabs>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import ContentConfig from './content.vue'
import StyleConfig from './style.vue'

const activeKey = ref('content')

const list = [
  {
    label: '内容配置',
    value: 'content',
    comp: ContentConfig
  },
  {
    label: '样式配置',
    value: 'style',
    comp: StyleConfig
  }
]

const currentComponent: any = computed(() => {
  return list.find((item) => item.value === activeKey.value)?.comp
})
</script>

<style scoped lang="less">
.diy-text-config {
  margin-top: -12px;
}
</style>
